<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-02-28 17:52:26
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        html,
        body,
        #app {
            height: auto;
            background: #fff;
        }

        .van-field__button {
            padding-left: 0;
            /* width: 60px; */
            text-align: center;
            height: 60px;
            line-height: 66px;
            /* border: 1px solid #e4e4e4; */
            margin-left: 10px;
        }

        .form-button {
            padding: 0 10px 10px;
        }

        .van-uploader__preview-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #969799;
            font-size: 18px;
            background-color: #fff;
            border-radius: 100%;
        }

        .van-uploader__upload {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-image {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-delete {
            height: 20px;
        }

        .van-cell__value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nav {
            padding-left: 10px;
            vertical-align: middle;
        }

        .nav img {
            width: 20px;
            vertical-align: middle;
            margin-top: -4px;
        }

        textarea {
            color: #000 !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-cell title="我的位置">
            <div>{{S_TName}}</div>
        </van-cell>
        <van-field v-model="S_Remarks" rows="3" autosize type="textarea" placeholder="请输入备注">
            <div slot="button">
                <div>
                    <div class="van-uploader">
                        <div class="van-uploader__wrapper">
                            <div class="van-uploader__preview" v-show="S_Path">
                                <div class="van-image van-uploader__preview-image"
                                    style="overflow: hidden; border-radius: 4px;">
                                    <img :src="'http://' + S_Path" class="van-image__img" style="object-fit: cover;" />
                                </div>
                                <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                    @click="S_Path = ''"></i>
                            </div>
                            <div class="van-uploader__upload" v-show="!S_Path" @click="chooseImg">
                                <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-field>

        <div class="form-button">
            <van-button block type="primary" :disabled="ifConfirm" :loading="ifConfirm" loading-text="数据提交中..."
                @click="clockConfirm">
                <span>{{nowDate}}&nbsp;&nbsp;考勤打卡</span>
            </van-button>
            </van-button>
        </div>


    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var userInfo = FLD.getUserInfo();


        var photoBrowser = api.require('photoBrowser');

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			agree:true
		});	
		}

        // if (api.systemType == 'ios') {
            map.initMapSDK(function (ret) { });
        // }

        var punchClockType = api.pageParam.punchClockType;


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                nowDate: FLD.getFormatDate(),
                baseData: '',
                S_Path: '',
                S_Remarks: '',
                S_Longitude: '',
                S_Latitude: '',
                S_IsOut: 0,
                S_TName: ''
            },
            created: function () {
                var that = this;
                that.getbaseData();
                setInterval(function () {
                    that.nowDate = FLD.getFormatDate();
                }, 1000)
            },
            methods: {
                getbaseData() {
                    var that = this;
                    FLD.ajax('APP_HQGRKQXX_K', {}, function (res) {
                        that.baseData = res.ds[0];
                        that.getNewLocation();

                    })
                },
                getNewLocation() {
                    var that = this;
                    map.getLocation({
                        accuracy: '10m',
                        autoStop: false
                    }, function (ret, err) {
                        map.getNameFromCoords({
                            lon: ret.lon,
                            lat: ret.lat
                        }, function (ret, err) {
                            that.S_TName = ret.address;

                        });
                    })
                },
                openPic() {
                    var that = this;
                    if (that.S_Path) {
                        photoBrowser.open({
                            images: ['http://' + that.S_Path],
                            bgColor: '#000'
                        }, function (ret) {
                            if (ret) {
                                if (ret.eventType == 'click') {
                                    photoBrowser.close();
                                }
                            }
                        })
                    }
                },
                chooseImg() {
                    var that = this;

                    var FNPhotograph = api.require('FNPhotograph');
                    FNPhotograph.open({
                        path: 'fs://',
                        album: true,
                        quality: 'medium'
                    }, function (ret) {
                        if (ret.eventType == 'takePhoto') {
                            FNPhotograph.close();
                            FLD.uploadFile('考勤图片', ret.imagePath, function (path) {
                                that.S_Path = FLD.serverIP + path;
                            })
                        }
                    });
                },
                clockConfirm() {
                    var that = this;
                    that.ifConfirm = true;
                    map.getLocation({
                        accuracy: '10m',
                        autoStop: true
                    }, function (ret, err) {
                        that.S_Longitude = ret.lon;
                        that.S_Latitude = ret.lat;
                        var rangeJSON = that.calLatLngByDistance(ret.lat, ret.lon, 500);
                        if (ret.lon > rangeJSON.newLng1 && ret.lon < rangeJSON.newLng2 && ret.lat > rangeJSON.newLat1 && ret.lat < rangeJSON.newLat2) {
                            that.S_IsOut = 0;
                        } else {
                            that.S_IsOut = 1;
                        }
                        map.getNameFromCoords({
                            lon: ret.lon,
                            lat: ret.lat
                        }, function (ret, err) {
                            that.S_TName = ret.address;

                            //这里有问题
                            // if(index == 1){
                            //     if(that.getClockText(1) == '迟到打卡'){
                            //         index = 2;
                            //     }
                            // }else if(index == -1){
                            //     if(that.getClockText(-1) == '早退打卡'){
                            //         index = -2;
                            //     }
                            // }

                            var obj = {
                                S_NBranchID: that.baseData.BID,
                                S_Status: punchClockType,
                                S_Path: that.S_Path,
                                S_Remarks: that.S_Remarks,
                                S_Longitude: that.S_Longitude,
                                S_Latitude: that.S_Latitude,
                                S_IsOut: that.S_IsOut,
                                S_TName: that.S_TName
                            }
                            FLD.ajax('APP_SXBDKJK_N', obj, function (res) {
                                that.ifConfirm = false;
                                api.sendEvent({
                                    name: 'refreshClock'
                                });
                                api.toast({
                                    msg: '打卡成功',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                setTimeout(function(){
                                    api.closeWin();
                                })

                            })
                        });
                    })

                },
                calLatLngByDistance(originLat, originLng, distance) {
                    //计算距离
                    var getDistance = ($lng1, $lat1, $lng2, $lat2) => {
                        const $earthRadius = 6367000;
                        $lat1 = ($lat1 * Math.PI) / 180;
                        $lng1 = ($lng1 * Math.PI) / 180;
                        $lat2 = ($lat2 * Math.PI) / 180;
                        $lng2 = ($lng2 * Math.PI) / 180;
                        const $calcLongitude = $lng2 - $lng1;
                        const $calcLatitude = $lat2 - $lat1;
                        const $stepOne = Math.pow(Math.sin($calcLatitude / 2), 2) + Math.cos($lat1) * Math.cos($lat2) * Math.pow(Math.sin($calcLongitude / 2), 2);
                        const $stepTwo = 2 * Math.asin(Math.min(1, Math.sqrt($stepOne)));
                        const $calculatedDistance = ($earthRadius * $stepTwo);
                        return Math.round($calculatedDistance);
                    }
                    let newLat1, newLat2, newLng1, newLng2

                    let latDistance = getDistance(originLng, 1, originLng, 2);
                    newLat1 = (originLat - (distance / latDistance)).toFixed(8);
                    newLat2 = (originLat + (distance / latDistance)).toFixed(8);
                    let lngDistance = getDistance(1, originLat, 2, originLat);
                    newLng1 = (originLng - (distance / lngDistance)).toFixed(8);
                    newLng2 = (originLng + (distance / lngDistance)).toFixed(8);

                    return {
                        newLat1: newLat1,
                        newLat2: newLat2,
                        newLng1: newLng1,
                        newLng2: newLng2
                    }

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>